<template>
  <!-- 顶部操作栏 -->
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">服务类型管理</span>
    <el-button type="primary" style="float: right;margin-top:10px;"
               @click="beforeAddService">新建服务</el-button>
  </div>

  <!-- 新增服务弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="40%" :before-close="handleClose">
    <el-form :model="addServiceForm" label-width="80px" label-position="top">
      <el-form-item label="服务名称" required>
        <el-input v-model="addServiceForm.name" placeholder="请输入服务名称" />
      </el-form-item>
      <el-form-item label="基础价格" required>
        <el-input-number v-model="addServiceForm.basePrice" :min="0" :precision="2" />
      </el-form-item>
      <el-form-item label="服务时长" required>
        <el-input-number v-model="addServiceForm.duration" :min="1" />
      </el-form-item>
      <el-form-item label="服务描述">
        <el-input v-model="addServiceForm.description" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addService">保存</el-button>
    </template>
  </el-dialog>
  <!-- 编辑服务弹窗 -->
  <el-dialog title="编辑服务" v-model="updateDialogVisible" width="40%" :before-close="handleUpdateClose">
    <el-form :model="EditServiceForm" label-width="80px" label-position="top">
      <el-form-item label="服务名称" required>
        <el-input v-model="EditServiceForm.name" />
      </el-form-item>
      <el-form-item label="基础价格" required>
        <el-input-number v-model="EditServiceForm.basePrice" :min="0" :precision="2" />
      </el-form-item>
      <el-form-item label="服务时长" required>
        <el-input-number v-model="EditServiceForm.duration" :min="1" />
      </el-form-item>
      <el-form-item label="服务描述">
        <el-input v-model="EditServiceForm.description" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="updateService">保存</el-button>
    </template>
  </el-dialog>
  <!-- 搜索栏 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="服务搜索" style="width: 270px;">
        <el-input placeholder="输入服务名称" v-model="searchServiceForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadService">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 服务卡片列表 -->
  <el-card style="margin: 10px;">
    <div class="service-grid">
      <el-card v-for="service in serviceArr" :key="service.id"
               class="service-card" shadow="hover">
        <div class="card-header">
          <h3>{{ service.name }}</h3>
          <div class="card-actions">
            <el-button type="primary" circle @click="editService(service.id)">
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button type="danger" circle @click="deleteService(service.id)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="card-content">
          <p class="price">¥{{ service.basePrice }}</p>
          <p class="duration">⏳ {{ service.duration }}小时</p>
          <p class="desc">{{ service.description }}</p>
        </div>
      </el-card>
    </div>
  </el-card>

  <!-- 页脚 -->
  <footer class="app-footer">
    <div class="container">
      <div class="footer-content">
        <p class="footer-title">安心陪诊后台管理系统</p>
        <p class="footer-links">
          &copy; 2025 安心陪诊平台 版权所有 |
          <a href="#" @click.prevent="goToUserAgreement">用户协议</a> |
          <a href="#" @click.prevent="goToPrivacyPolicy">隐私政策</a>
        </p>
      </div>
    </div>
  </footer>


</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import qs from 'qs'
import { ElMessage, ElMessageBox } from 'element-plus'

//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);
// 控制更新用户信息弹窗
const updateDialogVisible = ref(false);


//定义对象用来保存表单中的数据
const addServiceForm = ref({
  name: '',
  description: '',
  basePrice: 0,
  duration: 1
})
//定义保存用户的方法
const addService = () => {
  console.log('提交表单数据:', addServiceForm.value);
  let data = qs.stringify(addServiceForm.value);
  // console.log(data);
  axios.post(BASE_URL + '/v1/serviceType/add', data)
      .then(response => {
        console.log(response);
        if (response.data.state == 2000) {
          ElMessage.success('保存成功');
          dialogVisible.value = false;
          addServiceForm.value = {};
          loadService();//新增成功后需要重新加载列表数据!
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

//处理弹窗关闭方法
const handleClose = () => {
  if (confirm('确认取消保存用户吗？')) {
    //确认关闭后，关闭弹窗
    dialogVisible.value = false
    //清空表单
    addServiceForm.value = {};
  }
}

const handleUpdateClose = () => {
  if (confirm('确认取消更新用户信息吗？')) {
    //确认关闭后，关闭弹窗
    updateDialogVisible.value = false
    //清空表单
    EditServiceForm.value = {};
  }
}

//定义对象来保存用户查询的条件
const searchServiceForm = ref({name: ''});
//定义对象保存查询到的用户表格数据
const serviceArr = ref([]);
//定义加载用户列表的方法
const loadService = () => {
  let data = qs.stringify(searchServiceForm.value);
  console.log(data);
  //如果有查询条件,就根据条件查,没有条件默认查全部数据
  axios.get(BASE_URL + '/v1/serviceType/select?' + data)
      .then((response) => {//回调函数,处理响应数据
        if (response.data.state == 2000) {
          //后端返回的状态码是2000说明成功了
          serviceArr.value = response.data.data;//把请求回来的数据装到绑定表格的数组中
          console.log(serviceArr.value);
        } else {
          ElMessage.error(response.data.msg + "出错了");
        }
      })
}

//页面一加载完毕,立即执行
onMounted(() => {
  loadService();
})

//重置搜索
const resetSearch = () => {
  //清空之前的搜索内容
  searchServiceForm.value = {};
  //重新加载所有的用户数据
  loadService();
}

//定义变量用来保存弹窗的标题
const dialogTitle = ref('新建服务');
const updateDialogTitle = ref('编辑服务');
//定义点击新增用户按钮时调用的方法:处理新增用户时弹窗的标题
const beforeAddService = () => {
  dialogTitle.value = '新增服务';
  dialogVisible.value = true;
}

const EditServiceForm = ref({});
//定义编辑服务的方法
const editService = (id) => {
  updateDialogTitle.value = '编辑服务';
  updateDialogVisible.value = true;
  //获取当前待编辑的服务数据,回显在弹窗中
  axios.get(BASE_URL + `/v1/serviceType/${id}`).then((response) => {
    if (response.data.state == 2000) {
      EditServiceForm.value = response.data.data;
      console.log(EditServiceForm)
    } else {
      ElMessage.error(response.data.msg + "出错了");
    }
  })
}

// 编辑用户信息
const updateService = (id) => {
  let data = qs.stringify(EditServiceForm.value);
  //获取当前待编辑的用户数据,回显在弹窗中
  axios.post(BASE_URL + `/v1/serviceType/update`, data).then((response) => {
    if (response.data.state == 2000) {
      ElMessage.success('更新成功')
      EditServiceForm.value = {};
      updateDialogVisible.value = false;
      loadService();
    } else {
      ElMessage.error(response.data.msg + "出错了");
    }
  })
}

//创建删除员工的方法
const deleteService = (Id) => {
  ElMessageBox.confirm('您确认要删除该用户吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //确认删除后,执行删除操作
    axios.post(BASE_URL + '/v1/serviceType/delete/' + Id).then((response) => {
      if (response.data.state == 2000) {
        ElMessage.success('删除成功!');
        //删除成功后,需要重新加载用户列表
        loadService();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  })
}


</script>

<style scoped>
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 15px;
}

.service-card {
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.price {
  font-size: 18px;
  color: #ff6b6b;
  font-weight: bold;
}

.duration {
  color: #666;
  margin: 8px 0;
}

.desc {
  color: #555;
  line-height: 1.6;
}

/* 页脚样式 */
.app-footer {
  background-color: #f5f7fa;
  padding: 25px 0;
  border-top: 1px solid #e6e6e6;
  margin-top: 40px;
}

.footer-content {
  text-align: center;
}

.footer-title {
  color: #606266;
  margin-bottom: 12px;
  font-size: 15px;
}

.footer-links {
  color: #909399;
  font-size: 13px;
}

.footer-links a {
  color: #909399;
  transition: color 0.3s;
  margin: 0 5px;
}

.footer-links a:hover {
  color: #a6d2ff;
}
</style>